<template>
  <!-- 账户标签页面 -->
  <section class="page customer-tag-track-query">
    <data-form :model="model" :page="pageService" @onSearch="refreshData">
      <template slot="inputs">
        <el-form-item label="客户号" prop="personalNo">
          <el-input v-model.trim="model.personalNo"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input
            v-model.trim="model.personalName"
            :maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNo">
          <el-input v-model.trim="model.phoneNo" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model.trim="model.idCard" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="本次CT" prop="currentCt">
          <el-input v-model.trim="model.currentCt" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="前一次CT" prop="lastCt">
          <el-input v-model.trim="model.lastCt" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="更新时间" prop="updateTime">
          <el-date-picker type="daterange" :editable="false" v-model="model.updateTime" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="申请经办代号" prop="agentCode">
          <el-input v-model.trim="model.agentCode" :maxlength="20"></el-input>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="dataSet" :page="pageService" @onPageChange="refreshData">
      <template slot="columns">
        <el-table-column
          prop="personalId"
          label="客户号"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(6)"
        >
        </el-table-column>
        <el-table-column
          prop="personalName"
          label="客户姓名"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(3)"
        >
        </el-table-column>
        <el-table-column
          label="手机号"
          show-overflow-tooltip
          prop="phoneNo"
          :min-width="$helper.getColumnWidth(3)"
        >
        </el-table-column>
        <el-table-column
          label="身份证号"
          prop="idCard"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(3)"
        >
        </el-table-column>
        <el-table-column
          label="更新时间"
          prop="updateTime"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(6)"
          :formatter="row => $filter.dateTimeFormat(row.updateTime)"
        >
        </el-table-column>
        <el-table-column
          prop="agentCode"
          label="申请经办代号"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="lastCt"
          label="前一次CT"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="currentCt"
          label="本次CT"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="lastMaxCt"
          label="前一次MAX标签"
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="currentMaxCt"
          label="本次MAX标签"
          show-overflow-tooltip
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies, Layout } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import { CustomerGroupManageService } from "~/services/domain-service/customer-group-manage.service";

@Layout("workspace")
@Component({
  components: {}
})
export default class CustomerTagTrackQuery extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CustomerGroupManageService)
  private customerGroupManageService: CustomerGroupManageService;

  private dataSet: any[] = [];

  private model: any = {
    caseNumber: "",
    personalName: "",
    phoneNo: "",
    idCard: "",
    updateTime: [],
    currentCt: "",
    lastCt: "",
    agentCode: ""
  };

  private pickerOptions = {
    disabledDate (time) {
      return time.getTime() > Date.now();
    },
  }

  private mounted() {
    this.refreshData();
  }

  private refreshData() {
    this.customerGroupManageService
      .findAllTagLogs(this.paramsHandler(), this.pageService)
      .subscribe(data => {
        this.dataSet = data;
      });
  }

  private paramsHandler() {
    const params = { ...this.model, tagLevel: "CT" };
    params.minUpdateTime = this.$filter.dateRanageFormat(
      this.model.updateTime
    ).start;
    params.maxUpdateTime = this.$filter.dateRanageFormat(
      this.model.updateTime
    ).end;

    delete params.updateTime;
    return params;
  }
}
</script>

<style lang="less" scoped></style>
